<template>
  <div v-loading="loading" class="departments-container">
    <el-card>
      <treeTools :tree-node="company" :is-root="false" @addDept="handleAddDept" />
    </el-card>
    <el-tree :data="departs" :default-expand-all="true" :props="defaultProps">
      <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
      <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
      <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
      <treeTools slot-scope="{data}" :tree-node="data" @addDept="handleAddDept" @editDept="editDept" @refreshList="getDepartments" />
    </el-tree>
    <!-- currentNode 传递给这个 addDept 父子通信-->
    <addDept ref="addDept" :dialog-visible.sync="dialogVisible" :tree-node="currentNode" />
  </div>
</template>
<script>
import { getDepartments } from '@/api/departments'
import treeTools from './components/tree-tools.vue'
import { tranListToTreeData } from '@/utils'
import addDept from './components/add-dept.vue'
export default {
  name: 'HrsaasIndex',
  components: {
    treeTools,
    addDept
  },

  data() {
    return {
      departs: [],
      defaultProps: {
        label: 'name'
      },
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人', id: '' },
      dialogVisible: false,
      currentNode: {},
      loading: false
    }
  },

  mounted() {
    this.getDepartments()
  },
  methods: {
    // 那组织架构的数据
    async getDepartments() {
      try {
        this.loading = true
        const { depts, companyManage, companyName } = await getDepartments()
        this.departs = tranListToTreeData(depts, '')
        this.company = { name: companyName, manager: companyManage, id: '' }
      } finally {
        this.loading = false
      }
    },
    handleAddDept(node) {
      // addDept 显示
      // addDept 组件引入
      // addDept 组件 绑定变量  dialogVisible
      this.dialogVisible = true
      this.currentNode = node
    },
    editDept(node) {
      // currentNode 存放的当前操作的节点
      this.currentNode = { ...node }
      // 回现数据
      // node 复制 给addDept formData
      this.$refs.addDept.formData = { ...node }
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss">
.departments-container {
  width: 900px;
  margin: 20px auto;
  .el-card__body {
    // padding-right: 0px !important;
  }
}
</style>
